<template>
  <!-- 首页容器 -->
  <div class="home">
    <!-- 页面标题 -->
    <h1>待办清单</h1>
    <!-- 添加待办按钮 -->
    <el-button 
      type="primary" 
      @click="goToAddPage" 
      style="margin-bottom: 20px;"
    >
      添加待办
    </el-button>
    <!-- 待办事项列表容器 -->
    <div class="todo-list">
      <!-- 循环渲染待办事项卡片 -->
      <TodoCard 
        v-for="todo in todos" 
        :key="todo.id" 
        :todo="todo" 
      />
    </div>
    <!-- 删除前往用户中心的链接 -->
    <!-- <router-link to="/user" class="user-link">
      前往用户中心
    </router-link> -->
  </div>
</template>

<script setup>
// 导入待办事项的状态管理仓库
import { useTodoStore } from '../store/to-do.js'
// 从 pinia 库中导入 storeToRefs 函数，用于将仓库的状态转换为响应式引用
import { storeToRefs } from 'pinia'
// 导入待办事项卡片组件
import TodoCard from '../components/TodoCard.vue'
// 从 vue-router 库中导入 useRouter 函数，用于获取路由实例
import { useRouter } from 'vue-router'

// 获取待办事项的状态管理仓库实例
const store = useTodoStore()
// 获取路由实例
const router = useRouter()
// 将仓库的 todos 状态转换为响应式引用
const { todos } = storeToRefs(store)

// 跳转到添加待办页面的函数
const goToAddPage = () => {
  // 跳转到 /add 路径
  router.push('/add')
}
</script>

<style scoped>
.home {
  /* 设置最大宽度为 800px */
  max-width: 800px;
  /* 上下外边距为 0，左右居中 */
  margin: 0 auto;
  /* 内边距为 20px */
  padding: 20px;
}
.todo-list {
  /* 上外边距为 20px */
  margin-top: 20px;
}
</style>